<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Runface动态精准护肤</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" href="css/loaders.css">
		<link rel="stylesheet" href="css/mui.css">
		<link rel="stylesheet" type="text/css" href="font_icon/iconfont.css"/>
		
		<style>
			html,
			body {background-color: #efeff4;}
			span.mui-icon {font-size: 14px;/*color: #007aff; margin-left: -15px; */padding-right: 10px;}
			.mui-off-canvas-left {color: #fff;}
			.title {margin: 35px 15px 10px;}
			.title+.content {margin: 10px 15px 35px;color: #bbb;text-indent: 1em;font-size: 14px;line-height: 24px;}
			input {color: #000;}
			.mui-bar{background-color: #ff8dae;}
			.mui-off-canvas-left, .mui-off-canvas-right{background: #FFFFFF;}
			.mui-table-view-inverted{background: #ffffff;}
			.mui-table-view-inverted .mui-table-view-cell:after{background-color: #a4b9fa;}
			.mui-table-view-inverted:before{background-color: #FFFFFF;}
			.mui-table-view-inverted:after{background-color: #FFFFFF;}
			.mui-table-view-cell{padding: 13px 15px;color: #595555;}
			.aye{color:#70b2f9;}
			.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable{background-color: #FFFFFF;}
			/* .mui-card{border-radius: 20px;} */
			/*.mui-scroll-wrapper{position: static;}
			.mui-scroll{position: static;}*/
			.mui-bar.mui-bar-tab{
				background-color: #ff8dae;
			}
			.mui-bar.mui-bar-tab .mui-tab-item.mui-active{
				color: #FFFFFF;
			}
			
			
			
		</style>
	</head>

	<body>
		
		<!-- preloader -->
		<!-- <div class="preloader">
			<div class="spinner"></div>
		</div> -->
		<!-- end preloader -->
		
		<!-- 主界面菜单同时移动 -->
			<!-- 侧滑导航根容器 -->
			<div class="mui-off-canvas-wrap mui-draggable ">
				<!-- 主页面容器 -->
				<div class="mui-inner-wrap">
					<!-- 菜单容器 -->
					<aside class="mui-off-canvas-left" id="offCanvasSide">
						<div class="mui-scroll-wrapper" id="offCanvasSideScroll">
							<div class="mui-scroll">
								<!-- 菜单具体展示内容 -->
										<!-- <div class="title">&emsp;</div> -->
										<!--侧栏图片-->
										<div class="content">
											<div class="celan_div">
												<div class="celan_div1">
													<img class="celan_img" src="images/abuts.png" />
												</div>
												<div id="loginInfo" style="z-index: 9999;">
													<center><img class="celan_img1" src="images/logo.png" >
														<h5 style="margin-top: ;color: #939eed;"><center id="username">您尚未登录，请登录</center></h1>
														<span style="display: none;" id="detail"><p>获赞：0&nbsp;&nbsp;文章：0</p></span>
													</center>
												</div>
											</div>
										</div>
										<!--侧栏图片结束 -->
										
												<div class="title" style="margin-bottom: 25px;">&emsp;</div>
												<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
													<li class="mui-table-view-cell" >
														<a class="mui-navigate-right" href="template/News/Ordernews.html">
															<span class="celan_sp3">●</span>&emsp;淘宝订单模板
														</a>
													</li>
													<li class="mui-table-view-cell" >
														<a class="mui-navigate-right" href="template/News/Shopping-list.html">
															<span class="celan_sp6">●</span>&emsp;消费记录模板
														</a>
													</li>
													<li class="mui-table-view-cell" >
														<a class="mui-navigate-right" href="template/Other/business2-card.html">
															<span class="celan_sp4">●</span>&emsp;个人介绍模板
														</a>
													</li>
													<li class="mui-table-view-cell" >
														<a class="mui-navigate-right" href="template/News/trip.html">
															<span class="celan_sp5">●</span>&emsp;行程界面模板
														</a>
													</li>
													<li class="mui-table-view-cell" >
														<a class="mui-navigate-right" href="template/News/trip-details.html">
															<span class="celan_sp1">●</span>&emsp;行程详情模板
														</a>
													</li>
													<li class="mui-table-view-cell" >
														<a class="mui-navigate-right" href="template/Article/read.html">
															<span class="celan_sp6">●</span>&emsp;文章详情模板
														</a>
													</li>
													<li class="mui-table-view-cell">
														<a class="mui-navigate-right" href="template/Login/login1.html">
														<span class="celan_sp5">●</span>&emsp;登入模板
														</a>
													</li>
													<li class="mui-table-view-cell">
														<a class="mui-navigate-right" href="template/News/schedule.html"> 
															<span class="celan_sp4">●</span>&emsp;会议通知模板
														</a>
													</li>
													<li class="mui-table-view-cell">
														<a class="mui-navigate-right" href="template/News/newstwo.html">
															<span class="celan_sp3">●</span>&emsp;日程通知模板
														</a>
													</li>
													<li class="mui-table-view-cell">
														<a class="mui-navigate-right" href="setting.html">
															<span class="celan_sp1">●</span>&emsp;账户设置模板
														</a>
													</li>
													<li class="mui-table-view-cell">
														<a class="mui-navigate-right" href="template/Other/newtwoadd.html">
															<span class="celan_sp4">●</span>&emsp;新建日程模板
														</a>
													</li>
													<li class="mui-table-view-cell">
														<a class="mui-navigate-right" href="template/Other/other-business-card.html">
															<span class="celan_sp5">●</span>&emsp;公司职位名片模板
														</a>
													</li>
													<li class="mui-table-view-cell">
														<a class="mui-navigate-right" href="template/Other/business2-card.html">
															<span class="celan_sp3">●</span>&emsp;个人介绍模板
														</a>
													</li>
													<li class="mui-table-view-cell">
														<a class="mui-navigate-right" href="template/Other/other-emtmenu.html">
															<span class="celan_sp6">●</span>&emsp;O2O商品外卖模板
														</a>
													</li>
													<li class="mui-table-view-cell">
														<a class="mui-navigate-right" href="template/Other/other-Personal-Center.html">
															<span class="celan_sp2">●</span>&emsp;O2O个人中心模板
														</a>
													</li>
													<li class="mui-table-view-cell">
														<a class="mui-navigate-right" href="info.html">
															<span class="celan_sp1">●</span>&emsp;关于
														</a>
													</li>
													
												</ul>
											
									
								
							</div>
						</div>
					</aside>
					<aside class="mui-off-canvas-right" id="offCanvasSideCart">
						<div class="mui-scroll-wrapper" id="offCanvasSideCartScroll">
							<div class="mui-scroll">
								<!-- 购物车菜单具体展示内容 -->
								购物车菜单具体展示内容
								 <div class="sidebar-panel sidebar-cart">
								    <div id="slide-out-cart" class="collapsible side-nav">
								        <div class="content">
								            <div class="cart-img">
								                <img src="images/product1.png" alt="">
								            </div>
								            <div class="cart-title">
								                <a href="">Lipstick With Color Variants</a>
								                <h5>$28</h5>
								            </div>
								            <div class="cart-remove">
								                <a href=""><i class="mui-icon mui-icon-trash"></i></a>
								            </div>
								            <div class="clear"></div>
								        </div>
								        <div class="content">
								            <div class="cart-img">
								                <img src="images/product2.png" alt="">
								            </div>
								            <div class="cart-title">
								                <a href="">Soap Natural Ingredients</a>
								                <h5>$11</h5>
								            </div>
								            <div class="cart-remove">
								                <a href=""><i class="mui-icon mui-icon-trash"></i></a>
								            </div>
								            <div class="clear"></div>
								        </div>
								        <div class="content">
								            <div class="cart-img">
								                <img src="images/product3.png" alt="">
								            </div>
								            <div class="cart-title">
								                <a href="">Oil With Real Fruit Aroma</a>
								                <h5>$32</h5>
								            </div>
								            <div class="cart-remove">
								                <a href=""><i class="mui-icon mui-icon-trash"></i></a>
								            </div>
								            <div class="clear"></div>
								        </div>
								        <div class="cart-button">
								            <ul>
								                <li>
								                    <button class="button">View Cart</button>
								                </li>
								                <li>
								                    <button class="button">Checkout</button>
								                </li>
								            </ul>
								        </div>
								    </div>
								</div>
								
							</div>
						</div>
					</aside>
					<aside class="mui-off-canvas-right" id="offCanvasSideSearch">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<!-- 搜索菜单具体展示内容 -->
								<div class="sidebar-panel sidebar-search">
									<ul id="slide-out-right" class="collapsible side-nav">
										<li>
											<div class="form">
												<input type="search"><button class="button"><i class="iconfont icon-search" style="margin-left: -2px;"></i></button>
											</div>
											<div class="clear"></div>
										</li>
										<li><h5>热门搜索</h5></li>
										<li><a href="">敏感</a></li>
										<li><a href="">防晒</a></li>
										<li><a href="">美白</a></li>
										<li><a href="">痘痘</a></li>
										<li><a href="">毛孔</a></li>
										<li><a href="">卸妆</a></li>
										<li><a href="">性价比</a></li>
									</ul>
								</div>
							</div>
						</div>
					</aside>
					
					<!-- 主页面标题 -->
					<header class="mui-bar mui-bar-nav">
						<a class="mui-icon mui-action-menu iconfont icon-renshuicon mui-pull-left" href="#offCanvasSide" style="color: #FFFFFF;"></a>
						<a class="mui-icon mui-action-menu iconfont icon-gouwuche mui-pull-right" href="#offCanvasSideCart" style="margin-right: 5px;padding-right: 2px;color: #FFFFFF;"><span class="mui-badge mui-badge-danger" style="margin-top: 5px;" id="cartCount">3</span></a>
						<a class="mui-icon mui-action-menu iconfont icon-search mui-pull-right" href="#offCanvasSideSearch" style="margin-right: 0.5rem;color: #FFFFFF;"></a>
						<h1 class="mui-title" style="color: #FFFFFF;">Runface</h1>
					</header>
					<nav class="mui-bar mui-bar-tab">
						<a class="mui-tab-item mui-active">
							<span class="mui-icon mui-icon-home-filled"></span>
							<span class="mui-tab-label">主页</span>
						</a>
						<a class="mui-tab-item">
							<span class="mui-icon iconfont icon-icon2"></span>
							<span class="mui-tab-label">分类</span>
						</a>
						<a class="mui-tab-item">
							<span class="mui-icon iconfont icon-paizhao"></span>
							<span class="mui-tab-label">测一测</span>
						</a>
						<a class="mui-tab-item">
							<span class="mui-icon iconfont icon-dingzhi"></span>
							<span class="mui-tab-label">定制</span>
						</a>
						<a class="mui-tab-item">
							<span class="mui-icon iconfont icon-wode"></span>
							<span class="mui-tab-label">我的</span>
						</a>
					</nav>
					<!-- 主页面内容容器 -->
					<div class="mui-content mui-scroll-wrapper" id="offCanvasContentScroll">
						<div class="mui-scroll">
							<!-- 主界面具体展示内容 -->
							<!-- 轮播图片 start-->
							<div id="slider" class="mui-slider" >
							  <div class="mui-slider-group mui-slider-loop">
								<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
								<div class="mui-slider-item mui-slider-item-duplicate">
								  <a href="#">
									<img src="images/640_p4.webp" style="height: 300px;">
								  </a>
								</div>
								<!-- 第一张 -->
								<div class="mui-slider-item">
								  <a href="#">
									<img src="images/640_p1.webp" style="height: 300px;">
								  </a>
								</div>
								<!-- 第二张 -->
								<div class="mui-slider-item">
								  <a href="#">
									<img src="images/640_p2.webp" style="height: 300px;">
								  </a>
								</div>
								<!-- 第三张 -->
								<div class="mui-slider-item">
								  <a href="#">
									<img src="images/img_of_runface.webp" style="height: 300px;">
								  </a>
								</div>
								<!-- 第四张 -->
								<div class="mui-slider-item">
								  <a href="#">
									<img src="images/640_p4.webp" style="height: 300px;">
								  </a>
								</div>
								<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
								<div class="mui-slider-item mui-slider-item-duplicate">
								  <a href="#">
									<img src="images/640_p1.webp" style="height: 300px;">
								  </a>
								</div>
							  </div>
							  <div class="mui-slider-indicator">
								<div class="mui-indicator mui-active"></div>
								<div class="mui-indicator"></div>
								<div class="mui-indicator"></div>
								<div class="mui-indicator"></div>
							  </div>
							</div>
							<!-- 轮播图片 end-->
							<!--广告-->
							<!-- <div class="guanggao" ><a href="#"><img src="images/guanggao.jpg" width="100%" alt="" /></a></div> -->
							<!-- 五宫格图标 start -->
							<div class="box-container">
								<div class="box-col">
									<span>
										<svg class="icon" aria-hidden="true" style="width: 2.25em;height: 2.25em;">
										  <use xlink:href="#icon-hufupin4"></use>
										</svg>
									</span>
									<p>查产品</p>
								</div>
								<div class="box-col">
									<span>
										<svg class="icon" aria-hidden="true" style="padding-left: 3px;">
										  <use xlink:href="#icon-hufupin3"></use>
										</svg>
									</span>
									<p>护肤榜</p>
								</div>
								<div class="box-col">
									<span>
										<svg class="icon" aria-hidden="true">
										  <use xlink:href="#icon-paihangbang"></use>
										</svg>
									</span>
									<p>肤质榜</p>
								</div>
								<div class="box-col">
									<span>
										<svg class="icon" aria-hidden="true" style="width: 2.25em;height: 2.25em;padding-top: 7px;">
										  <use xlink:href="#icon-huabanfuben"></use>
										</svg>
									</span>
									<p>活动促销</p>
								</div>
								<div class="box-col">
									<span>
										<svg class="icon" aria-hidden="true">
										  <use xlink:href="#icon-hufupin"></use>
										</svg>
									</span>
									<p>新品榜</p>
								</div>
								
							</div>
							<!-- 五宫格图标 end -->
							<!-- 产品列表 start -->
							 <div class="mui-row" id="product_list">
								 
								<div id="" class="mui-pull-left">
									&nbsp;&nbsp;为你推荐
								</div>
								<div class="mui-pull-right" id="moreProduct"><a href="#" >更多<span class="mui-icon mui-icon-arrowright"></span></a></div>
							<!-- 	<div class="mui-col-sm-12 mui-col-xs-12" >
									<ul class="mui-table-view mui-grid-view">
										<li class="mui-table-view-cell mui-media mui-col-xs-5" >
											<a href="#">
												<img class="mui-media-object" src="images/product-details1.png" id="wenzishuoming">
												<div class="mui-media-body">文字说明1</div>
												<div class="mui-media-body">文字说明1</div>
											</a>
										</li>
										<li class="mui-table-view-cell mui-media mui-col-xs-5">
											<a href="#">
												<img class="mui-media-object" src="http://placehold.it/400x300">
												<div class="mui-media-body">文字说明2</div>
												<div class="mui-media-body">文字说明2</div>
											</a>
										</li>
									</ul>
								</div>
							 --></div>
							<div class="mui-content">
								<div class="new-pattern">
				<img class="w100" src="images/hometit1.jpg" alt="">
			<!-- 	<ul class="pattern-list">
					<li class="mui-card-footer">
						<div class="mui-card">
							<a href="#">
								<div class="mui-card-header mui-card-media" style="height:40vw;"><img class="w100" src="images/list-ph01.png"></div>
								<div class="mui-card-content">
									<div class="mui-card-content-inner">
										<p style="color: #333;">韩版青少年休闲修身长袖紧身衬衫</p>
									</div>
								</div>
								<div class="pattern-list__p">
									<p class="font-color-pink">￥<label>168</label></p>
									<p>库存<label>538</label></p>
								</div>
							</a>
						</div>
						<div class="mui-card">
							<a href="examples/new-personal-details.html">
								<div class="mui-card-header mui-card-media" style="height:40vw;"><img class="w100" src="images/list-ph01.png"></div>
								<div class="mui-card-content">
									<div class="mui-card-content-inner">
										
										<p style="color: #333;">韩版青少年休闲修身长袖紧身衬衫</p>
									</div>
								</div>
								<div class="pattern-list__p">
									<p class="font-color-pink">￥<label>168</label></p>
									<p>库存:<label>538</label></p>
								</div>
							</a>
						</div>
					</li>
					<li class="mui-card-footer">
						<div class="mui-card">
							<a href="examples/new-personal-details.html">
								<div class="mui-card-header mui-card-media" style="height:40vw;"><img class="w100" src="images/list-ph01.png"></div>
								<div class="mui-card-content">
									<div class="mui-card-content-inner">
										
										<p style="color: #333;">韩版青少年休闲修身长袖紧身衬衫</p>
									</div>
								</div>
								<div class="pattern-list__p">
									<p class="font-color-pink">￥<label>168</label></p>
									<p>库存:<label>538</label></p>
								</div>
							</a>
						</div>
						<div class="mui-card">
							<a href="examples/new-personal-details.html">
								<div class="mui-card-header mui-card-media" style="height:40vw;"><img class="w100" src="images/list-ph01.png"></div>
								<div class="mui-card-content">
									<div class="mui-card-content-inner">
										
										<p style="color: #333;">韩版青少年休闲修身长袖紧身衬衫</p>
									</div>
								</div>
								<div class="pattern-list__p">
									<p class="font-color-pink">￥<label>168</label></p>
									<p>库存:<label>538</label></p>
								</div>
							</a>
						</div>
					</li>
				</ul>
			 --></div>
							
							</div>
							<!-- 文章start -->
							<div id="articleList" class="mui-row">
								<div id="" class="mui-pull-left">
										&nbsp;&nbsp;热门点评
									</div>
									<div class="mui-pull-right" id="moreProduct"><a href="#" >更多<span class="mui-icon mui-icon-arrowright"></span></a></div>
							</div>
									<div class="mui-content" style="padding-top: p;">
											<ul class="mui-table-view">
												<li class="mui-table-view-cell mui-media">
													<a href="javascript:;">
														<img class="mui-media-object mui-pull-left" src="css/registLogin/touxiang.jpg">
														<div class="mui-media-body">
															幸福
															<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
														</div>
													</a>
												</li>
												<li class="mui-table-view-cell mui-media">
													<a href="javascript:;">
														<img class="mui-media-object mui-pull-left" src="css/registLogin/touxiang.jpg">
														<div class="mui-media-body">
															木屋
															<p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
														</div>
													</a>
												</li>
												<li class="mui-table-view-cell mui-media">
													<a href="javascript:;">
														<img class="mui-media-object mui-pull-left" src="css/registLogin/touxiang.jpg">
														<div class="mui-media-body">
														    CBD
															<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
														</div>
													</a>
												</li>
											</ul>
										
									</div>
							
							</div>
					</div>
			   	 <div class="mui-off-canvas-backdrop"></div>
				</div>
			</div>
		<!-- 脚本 -->
		<script src="js/mui.js"></script>
		<script src="js/app.js"></script>
		<script src="js/template-web.js"></script>
		<script src="font_icon/iconfont.js"></script>
		<script>
			mui.init()
			 //侧滑容器父节点
			var offCanvasWrapper = mui('#offCanvasWrapper');
			 //主界面容器
			// var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
			 //主界面和侧滑菜单界面均支持区域滚动；
			mui('#offCanvasSideScroll').scroll();
			mui('#offCanvasContentScroll').scroll();
			mui('#offCanvasRightSide').scroll();
			
			mui('#offCanvasSideCartScroll').scroll();
// 			 //实现ios平台原生侧滑关闭页面；
// 			if (mui.os.plus && mui.os.ios) {
// 				mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能
// 					plus.webview.currentWebview().setStyle({
// 						'popGesture': 'none'
// 					});
// 				});
// 			}
			//界面所有a标签跳转指定href
// 			mui('body').on('tap','a',function(){
// 				document.location.href=this.href;
// 			});
// 			mui('#slider').on('tap','a',function(){
// 				console.log("tap事件触发！");
// 			});
			//获得slider插件对象
			var gallery = mui('.mui-slider');
			gallery.slider({
			  interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
			});
			///退出关闭
			mui.oldback = mui.back;
				var clickNum = 0;
				mui.back = function(event){
				   clickNum++;
				   if(clickNum > 1){
				       plus.runtime.quit();
				   }else{
				       mui.toast("再按一次退出应用.");
				   }
				   setTimeout(function(){
				       clickNum = 0
				   },1000);
				        return false;
				};
		//刷新用户信息
		function refreshUserInfo() {
			var user = app.getUserGlobalInfo();
			console.log("refresh======="+JSON.stringify(user))
			
			if (user != null) {
				var faceImage = user.faceImage;
				var nickname = user.nickname;
				var username = user.username;
				
				var span_nickname = document.getElementById("span_nickname");
				var span_username = document.getElementById("span_username");
				
				span_username.innerHTML = username;
				
				if (app.isNotNull(faceImage)) {
					var img_my_face = document.getElementById("img_my_face");
					img_my_face.src = app.imgServerUrl + faceImage;
				}
			}
			
		}	
		
		var loginInfo=document.getElementById("loginInfo");
		loginInfo.addEventListener('tap',function(){
			var userInfo = app.getUserGlobalInfo();
			console.log("userInfo===="+userInfo);
			if(userInfo!=null){
				mui.openWindow('me-setting.html','me-setting.html');
			}else{
				// console.log("userInfo===="+userInfo);
				mui.openWindow('login.html','login.html');
			}
			
		})
  			
		function plusReady(){
			// 设置系统状态栏背景
			plus.navigator.setStatusBarBackground( "#ff8dae" );
			// 设置系统状态栏样式为浅色文字
			plus.navigator.setStatusBarStyle( "UIStatusBarStyleBlackOpaque" );
			
			var meWebview = plus.webview.currentWebview();
			meWebview.addEventListener("show", function() {
				refreshUserInfo();
			});
			// 判断本地是否保存有user信息
			var userInfo = app.getUserGlobalInfo();
			if(userInfo!=null){
				
				// 获得当前的webview，刷新当前用户信息
				
				
				var loginInfo=document.getElementById("loginInfo");
				var username=document.getElementById("username");
				var detail=document.getElementById("detail");
				username.innerHTML='welcome,'+userInfo.username;
				// console.log(JSON.stringify(userInfo));
				detail.style.display='block';
				// console.log(detail.style.display);
			}
			
			}
			if(window.plus){
			plusReady();
			}else{
			document.addEventListener("plusready",plusReady,false);
			
		};
		mui.plusReady(function(){
			refreshUserInfo();
		})
		
		</script>
		<script src="js/jquery.min.js"></script>
		<script src="js/main.js"></script>
		
	</body>

</html>
